<template>
     <div>
         
        <div class="map-p">
            <div class="search-p">
                <input id="tipinput" class="search-input" v-model="placeName" placeholder="请输入地址" />
            </div>
            <div id="container" style="height:500px;"></div>
        </div>
           
     </div>
</template>
<script>

export default {
     components: {
        
    },
   
    data () {
        return {
             map: null,
             placeName: '',
             lng: '',
             lat: ''
        }
    },
    methods: {
        init () {
            console.log('initmmmmmmmmmmmmm')
            var self = this
            /* eslint-disable no-undef */
            var map = new AMap.Map('container', {
                zoom: 11,
                viewMode: '3D',
                center: [119.306582, 26.08332]
            
            })
            this.map = map
            var autoOptions = {
                input: 'tipinput'
            }
            var auto = new AMap.Autocomplete(autoOptions)
            var placeSearch = new AMap.PlaceSearch({
                map: map
            })
            AMap.event.addListener(auto, 'select', select)
            function select (e) {
                placeSearch.setCity(e.poi.adcode)
                placeSearch.search(e.poi.name)
            }
            map.on('click', function (e) {
                self.addMarker(e.lnglat)
            })
            // if (this.lng) {
            //     var lnglat = new AMap.LngLat(this.lng, this.lat)
            //     this.addMarker(lnglat)
            // } 
        },
        addMarker (lnglat) {
             /* eslint-disable no-undef */
            var marker = new AMap.Marker({
                position: lnglat
            })
             this.map.clearMap()
             this.map.add(marker)
              var circle = new AMap.Circle({
                center: [lnglat.lng, lnglat.lat],
                radius: 10, 
                strokeColor: '#FF33FF', 
                strokeWeight: 1,
                strokeOpacity: 0.2,
                fillOpacity: 0.4,
                fillColor: '#1791fc',
                zIndex: 50
            })
            circle.setMap(this.map)
            this.map.setFitView([ circle ])

            this.lng = lnglat.lng
            this.lat = lnglat.lat
            var geocoder = new AMap.Geocoder({
                radius: 100000
            })
            var self = this
             geocoder.getAddress(lnglat, function (status, result) {
                if (status === 'complete' && result.regeocode) {
                      self.address = result.regeocode.formattedAddress
                } else {
                      self.address = '根据经纬度查询地址失败'
                }

                var dom = document.createElement('div')
                dom.style.background = '#fff'
                dom.style.padding = '5px'
                dom.style.boxShadow = '0 0 10px 0 rgba(0,0,0,0.8)'
                dom.innerHTML = self.address
                let infoWindow = new AMap.InfoWindow({
                    isCustom: true,
                   content: dom,
                    offset: new AMap.Pixel(2, -35)
                })
                infoWindow.open(self.map, [lnglat.lng, lnglat.lat])
            })
        }
    },
    mounted () {
        
    }
}
</script>
<style scoped>
.map-p{
    position: relative;
}
.search-p{
    position: absolute;
    top: 10px;
    left: 10px;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.6);
    z-index: 10;
    padding: 5px 10px;
    background: #fff;
}
.search-input{
    font-size: 16px;
    padding: 5px;
}

</style>
